<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-08-20 14:33:03
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-12-05 20:41:59
 * @FilePath: /nhw/src/views/Assignment/index.vue
-->
<template>
  <Layout class="assignment-container" title="任务" :leftArrow="false" border>
    <template #right>
      <Icon name="filter-o" @click="showPopup" />
    </template>

    <!-- main  -->
    <Tabs
      v-model="active"
      sticky
      :offset-top="$store.state.navHeight"
      @click="changeTab"
      ref="tabs"
    >
      <Tab title="我的待办" name="A">
        <PullRefresh v-model="isLoadingA" @refresh="onRefresh('A')">
          <MySearch @search="onSearch" mark="A" />
          <List
            v-model="loadingA"
            :finished="finishedA"
            finished-text="没有更多了"
            @load="onLoad('A')"
            v-if="taskListWait.length > 0"
          >
            <Card
              v-for="item in taskListWait"
              :key="item.toDoListNo"
              @click="toAssignment(item)"
            >
              <CardTitle :text="item.pgmNam" adorn :stateText="item.state" />
              <CardTwig left="发起人" :right="item.startUsrId" />
              <CardTwig left="提交时间" :right="item.startDtm" />
              <CardTwig left="当前节点" :right="item.content" />
              <CardTwig left="停留时间" :right="item.arrivedDtm" />
              <!-- <Stamp text="审核通过" /> -->
            </Card>
          </List>
          <Empty description="无数据" v-else />
        </PullRefresh>
      </Tab>
      <Tab title="我的已办" name="B">
        <PullRefresh v-model="isLoadingB" @refresh="onRefresh('B')">
          <MySearch @search="onSearch" mark="B" />
          <List
            v-model="loadingB"
            :finished="finishedB"
            finished-text="没有更多了"
            @load="onLoad('B')"
            v-if="taskListFinished.length > 0"
          >
            <Card
              v-for="item in taskListFinished"
              :key="item.toDoListNo"
              @click="toAssignment(item)"
            >
              <CardTitle :text="item.pgmNam" adorn :stateText="item.state" />
              <CardTwig left="发起人" :right="item.startUsrId" />
              <!-- <CardTwig left="提交时间" :right="item.startDtm" /> -->
              <CardTwig left="当前节点" :right="item.content" />
              <CardTwig left="停留时间" :right="item.arrivedDtm" />
            </Card>
          </List>
          <Empty description="无数据" v-else />
        </PullRefresh>
      </Tab>
      <Tab title="我的发起" name="C">
        <PullRefresh v-model="isLoadingC" @refresh="onRefresh('C')">
          <MySearch @search="onSearch" mark="C" />
          <List
            v-model="loadingC"
            :finished="finishedC"
            finished-text="没有更多了"
            @load="onLoad('C')"
            v-if="taskListEmit.length > 0"
          >
            <Card
              v-for="item in taskListEmit"
              :key="item.toDoListNo"
              @click="toAssignment(item)"
            >
              <CardTitle
                :text="item.pgmNam"
                adorn
                :stateText="item.stateDesc"
              />
              <!-- <CardTwig left="发起人" :right="item.startUsrId" /> -->
              <CardTwig left="提交时间" :right="item.startDtm" />
              <CardTwig left="当前节点" :right="item.content" />
              <!-- <CardTwig left="停留时间" :right="item.arrivedDtm" /> -->
            </Card>
          </List>
          <Empty description="无数据" v-else />
        </PullRefresh>
      </Tab>
    </Tabs>
    <!-- main -->

    <!-- 弹出层 -->
    <PopupCon
      :radio="true"
      :show="show"
      btnTitle="业务模块"
      :btnList="btnList"
      @close="handleClose"
      @confirm="handleFilterList"
      @reset="handleReset"
    />
  </Layout>
</template>

<script>
import Layout from "components/Layout";
import PopupCon from "components/PopupCon";
import Card from "components/Card";
import CardTwig from "components/Card/CardTwig";
import CardTitle from "components/Card/CardTitle";
import MySearch from "components/MySearch";
import Stamp from "components/Stamp";
import { Tab, Tabs, Icon, List, PullRefresh, Empty } from "vant";
import axios from "axios";

export default {
  name: "Assignment",

  components: {
    Layout,
    PopupCon,
    Card,
    CardTwig,
    CardTitle,
    MySearch,
    Stamp,
    Tab,
    Tabs,
    Icon,
    List,
    PullRefresh,
    Empty,
  },

  data() {
    return {
      active: 0,
      show: false,
      //我的待办
      loadingA: false,
      finishedA: false,
      isLoadingA: false,
      searchKeyA: "",
      pageA: 1,
      //我的已办
      loadingB: false,
      finishedB: false,
      isLoadingB: false,
      searchKeyB: "",
      pageB: 1,
      //我的发起
      loadingC: false,
      finishedC: false,
      isLoadingC: false,
      searchKeyC: "",
      pageC: 1,
      //筛选按钮数据
      pgmId: "",
      btnList: [
        // {
        //   name: "随手拍",
        //   active: false,
        //   id: "rskmgProblemClap",
        // },
      ],
      taskListWait: [], //待办
      taskListFinished: [], //已办
      taskListEmit: [], //发起
    };
  },
  created() {
    console.log("created");
    this.pageA = this.pageB = this.pageC = 1;
    this.$toast.loading("加载中...");
    this.token = window.localStorage.getItem("access_token");
    this.userId = JSON.parse(window.localStorage.getItem("userInfo")).userId;
    this.getBusinessModule();
  },
  activated() {
    this.getTaskList({ pgmId: this.pgmId }).then(
      (res) => {
        this.$toast.clear();
        const { rows } = res;
        this.taskListWait = rows;
      },
      (error) => {
        console.log(error);
      }
    );
  },
  mounted() {},

  methods: {
    //切换tab
    changeTab(name) {
      const flag = {
        A: "todo",
        B: "done",
        C: "starts",
      };
      this["finished" + name] = false;
      this.renderTaskList(
        {
          type: flag[name],
          pgmId: this.pgmId,
          searchParams: this["searchKey" + name],
        },
        name
      );
    },
    //搜索
    onSearch(value) {
      const { mark, key } = value;
      const flag = {
        A: "todo",
        B: "done",
        C: "starts",
      };
      this["searchKey" + mark] = key;
      this["finished" + mark] = false;
      this.renderTaskList(
        { type: flag[mark], searchParams: key, pgmId: this.pgmId },
        mark
      );
    },
    //获取任务列表
    async getTaskList({
      page = 1,
      limit = 10,
      searchParams = "",
      pgmId = "",
      type = "todo",
    } = {}) {
      this.$toast.loading("加载中...");
      const res = await axios.get("/nhw/api/task/getMyTaskList.ajax", {
        params: {
          access_token: this.token,
          userId: this.userId,
          page,
          searchParams,
          limit,
          pgmId,
          type,
        },
      });
      if (res.status == 200) {
        this.$toast.clear();
        const { data } = res;
        return data.param.taskList;
      } else {
        this.$toast.fail("网络异常！");
        throw "network error";
      }
    },

    //显示筛选
    showPopup() {
      this.show = true;
    },
    //关闭筛选
    handleClose(lastBtnList) {
      this.show = false;
      if (lastBtnList) {
        this.btnList = lastBtnList;
      }
    },
    //重置筛选
    handleReset() {
      const active = this.active;
      this.pgmId = "";
      this["finished" + active] = false;
      this["pageA" + active] = 1;
      this.changeTab(active);
      this.btnList.forEach((item) => {
        item.active = false;
      });
    },
    //筛选条件
    handleFilterList() {
      const active = this.active;
      const flag = {
        A: "todo",
        B: "done",
        C: "starts",
      };
      const pgmId = this.btnList.find((item) => {
        return item.active;
      }).key;
      this.pgmId = pgmId;
      this["finished" + active] = false;
      this.renderTaskList(
        { type: flag[active], pgmId, searchParams: this["searchKey" + active] },
        active
      );
    },
    //滑动到底部加载
    onLoad(flag) {
      if (flag === "A") {
        this.getTaskList({
          page: ++this.pageA,
          type: "todo",
          searchParams: this.searchKeyA,
          pgmId: this.pgmId,
        }).then((res) => {
          this.taskListWait.push(...res.rows);
          this.loadingA = false;
          if (this.taskListWait.length >= res.tatol) {
            this.finishedA = true;
          }
        });
      } else if (flag === "B") {
        this.getTaskList({
          page: ++this.pageB,
          type: "done",
          searchParams: this.searchKeyB,
          pgmId: this.pgmId,
        }).then((res) => {
          this.taskListFinished.push(...res.rows);
          this.loadingB = false;
          if (this.taskListFinished.length >= res.tatol) {
            this.finishedB = true;
          }
        });
      } else if (flag === "C") {
        this.getTaskList({
          page: ++this.pageC,
          type: "starts",
          searchParams: this.searchKeyC,
          pgmId: this.pgmId,
        }).then((res) => {
          this.taskListEmit.push(...res.rows);
          this.loadingC = false;
          if (this.taskListEmit.length >= res.tatol) {
            this.finishedC = true;
          }
        });
      }
    },
    //下拉刷新
    onRefresh(flag) {
      if (flag === "A") {
        this.pageA = 1;
        this.finishedA = false;
        this.getTaskList({
          type: "todo",
          searchParams: this.searchKeyA,
          pgmId: this.pgmId,
        }).then((res) => {
          const { rows } = res;
          this.taskListWait = rows;
          this.isLoadingA = false;
        });
      } else if (flag === "B") {
        this.pageB = 1;
        this.finishedB = false;
        this.getTaskList({
          type: "done",
          searchParams: this.searchKeyB,
          pgmId: this.pgmId,
        }).then((res) => {
          const { rows } = res;
          this.taskListFinished = rows;
          this.isLoadingB = false;
        });
      } else if (flag === "C") {
        this.pageC = 1;
        this.finishedC = false;
        this.getTaskList({
          type: "starts",
          searchParams: this.searchKeyC,
          pgmId: this.pgmId,
        }).then((res) => {
          const { rows } = res;
          this.taskListEmit = rows;
          this.isLoadingC = false;
        });
      }
    },

    renderTaskList(params, name) {
      this.pageA = this.pageB = this.pageC = 1;
      this.getTaskList(params).then(
        (res) => {
          const { rows } = res;
          if (name == "A") {
            this.taskListWait = rows;
          } else if (name == "B") {
            this.taskListFinished = rows;
          } else if (name == "C") {
            this.taskListEmit = rows;
          }
          this.$refs.tabs.$el.scrollTop = -1;

          this.$nextTick(() => {
            this.$refs.tabs.$el.scrollTop = 0;
          });
        },
        (error) => {
          console.log(error);
        }
      );
    },
    async getBusinessModule() {
      const res = await axios
        .get("/nhw/api/base/getWfGroupList.ajax", {
          params: {
            access_token: this.token,
          },
        })
        .then((res) => {
          const { data } = res;
          this.btnList = data.param.data.map((item) => {
            return { ...item, active: false };
          });
        })
        .catch((err) => {
          console.error(err);
        });
    },
    toAssignment(data) {
      const { content, moduleId, modelId, pkValue } = data;
      this.$router.push({
        name: "AssignmentDetail",
        query: { content, moduleId, modelId, pkValue },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.assignment-container {
  .van-tabs {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/deep/ .van-tabs__line {
  background-color: transparent;
  background-image: linear-gradient(90deg, #e0680f, #e68840);
}
</style>